package com.example.chenyang4

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = Color(0xFFF5F5F5)
            ) {
                CategoryGridScreen()
            }
        }
    }
}

data class Category(
    val name: String,
    val count: Int,
    val imageRes: Int
)

@Composable
fun CategoryGridScreen() {
    val categories = listOf(
        Category("1", 58, R.drawable.image1),
        Category("2", 90, R.drawable.image2),
        Category("3", 78, R.drawable.image3),
        Category("4", 423, R.drawable.image4),
        Category("5", 67, R.drawable.image5),
        Category("6", 100, R.drawable.image6),
        Category("7", 37, R.drawable.image7),
        Category("8", 326, R.drawable.image8),
        Category("9", 96, R.drawable.image9),
        Category("10", 305, R.drawable.image10),
        Category("11", 172, R.drawable.image11),
        Category("12", 30, R.drawable.image12),
        Category("13", 121, R.drawable.image13),
        Category("14", 118, R.drawable.image14),
        Category("15", 28, R.drawable.image15),
        Category("16", 92, R.drawable.image16),
        Category("17", 165, R.drawable.image23 ),
        Category("18", 290, R.drawable.image18),
        Category("19", 189, R.drawable.image19),
        Category("20", 58, R.drawable.image20),
        Category("21", 212, R.drawable.image21),
        Category("22", 321, R.drawable.image22)
    )

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xFFF5F5F5))
    ) {
        // 顶部状态栏区域
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(68.dp)
                .background(Color.White),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "12:00",
                fontSize = 16.sp,
                fontWeight = FontWeight.Medium,
                color = Color.Black
            )
        }

        // 两列网格布局
        LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp),
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            items(categories) { category ->
                CategoryGridItem(category = category)
            }
        }
    }
}

@Composable
fun CategoryGridItem(category: Category) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(16.dp))
            .background(Color.White),
        verticalAlignment = Alignment.CenterVertically
    ) {
        // 左边图片 - 68dp × 68dp，直接贴合左边
        Image(
            painter = painterResource(id = category.imageRes),
            contentDescription = "${category.name} icon",
            modifier = Modifier
                .size(68.dp)
                .clip(RoundedCornerShape(12.dp))
        )

        Spacer(modifier = Modifier.width(16.dp))

        // 右边文字区域
        Column(
            modifier = Modifier
                .weight(1f)
                .padding(vertical = 16.dp) // 文字区域垂直内边距16dp
        ) {
            // 分类名称
            Text(
                text = category.name,
                fontSize = 16.sp,
                fontWeight = FontWeight.Medium,
                color = Color.Black
            )

            Spacer(modifier = Modifier.height(8.dp))

            // 数量区域 - 包含小图标和数字
            Row(
                verticalAlignment = Alignment.CenterVertically
            ) {
                // 小图标
                Image(
                    painter = painterResource(id = R.drawable.image17),
                    contentDescription = "count icon",
                    modifier = Modifier.size(12.dp)
                )

                Spacer(modifier = Modifier.width(8.dp))

                // 课程数量
                Text(
                    text = "${category.count}",
                    fontSize = 14.sp,
                    fontWeight = FontWeight.Normal,
                    color = Color.Gray
                )
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    CategoryGridScreen()
}
